---
import { getLeftSidebarMenu } from '$components/Menu/LeftSidebar/getLeftSidebarMenu'

const sidebarMenu = await getLeftSidebarMenu()

let pathname = Astro.url.pathname
pathname = pathname.startsWith('/') ? pathname.slice(1) : pathname
pathname = pathname.endsWith('/') ? pathname.slice(0, -1) : pathname

pathname = pathname.replace('docs/', '')

const pathnameItems = pathname.split('/')

const section = pathnameItems[0] as 'learn' | 'reference'

const allMenuItems = sidebarMenu[section].categories
  .flat()
  .flatMap((category) => category.menuItems)

const currentMenuItemIndex = allMenuItems.findIndex((menuItem) => pathname.endsWith(menuItem.slug))

const previousMenuItem = allMenuItems[currentMenuItemIndex - 1]
const previousMenuItemCategory = previousMenuItem
  ? sidebarMenu[section].categories.find((category) =>
      category.menuItems.includes(previousMenuItem)
    )
  : undefined

const nextMenuItem = allMenuItems[currentMenuItemIndex + 1]
const nextMenuItemCategory = nextMenuItem
  ? sidebarMenu[section].categories.find((category) => category.menuItems.includes(nextMenuItem))
  : undefined

const makeHref = (menuItem: LeftSidebarMenuItem, category: LeftSidebarMenuCategory) => {
  return `${category.urlPrefix}/${menuItem.slug}`
}
---

<div
  class="text-faded mt-20 flex flex-col justify-between rounded-md border-white/10 bg-blue-900 md:flex-row"
>
  {
    previousMenuItem && previousMenuItemCategory ? (
      <a
        class="text-inherit! hover:text-white! flex flex-row items-center gap-3 px-6 py-6 no-underline"
        href={makeHref(previousMenuItem, previousMenuItemCategory)}
      >
        <svg
          xmlns="http://www.w3.org/2000/svg"
          width="76"
          height="76"
          class="h-[2em] w-auto fill-current"
          viewBox="0 0 256 256"
        >
          <>
            <path
              d="M224,128a96,96,0,1,1-96-96A96,96,0,0,1,224,128Z"
              opacity="0.2"
            />
            <path d="M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm0,192a88,88,0,1,1,88-88A88.1,88.1,0,0,1,128,216Zm48-88a8,8,0,0,1-8,8H107.31l18.35,18.34a8,8,0,0,1-11.32,11.32l-32-32a8,8,0,0,1,0-11.32l32-32a8,8,0,0,1,11.32,11.32L107.31,120H168A8,8,0,0,1,176,128Z" />
          </>
        </svg>

        <div class="flex flex-col">
          <span class="text-xs">Previous Page</span>
          <span class="text-xl">{previousMenuItem.title}</span>
        </div>
      </a>
    ) : (
      <div />
    )
  }

  {
    nextMenuItem && nextMenuItemCategory && previousMenuItem && previousMenuItemCategory && (
      <hr class="my-0 self-stretch md:hidden" />
    )
  }

  {
    nextMenuItem && nextMenuItemCategory ? (
      <a
        class="text-inherit! hover:text-white! flex flex-row items-center gap-3 self-end px-6 py-6 no-underline md:self-auto"
        href={makeHref(nextMenuItem, nextMenuItemCategory)}
      >
        <div class="flex flex-col items-end">
          <span class="text-xs">Next Page</span>
          <span class="text-xl">{nextMenuItem.title}</span>
        </div>
        <svg
          xmlns="http://www.w3.org/2000/svg"
          width="76"
          height="76"
          class="h-[2em] w-auto fill-current"
          viewBox="0 0 256 256"
        >
          <>
            <path
              d="M224,128a96,96,0,1,1-96-96A96,96,0,0,1,224,128Z"
              opacity="0.2"
            />
            <path d="M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm0,192a88,88,0,1,1,88-88A88.1,88.1,0,0,1,128,216Zm45.66-93.66a8,8,0,0,1,0,11.32l-32,32a8,8,0,0,1-11.32-11.32L148.69,136H88a8,8,0,0,1,0-16h60.69l-18.35-18.34a8,8,0,0,1,11.32-11.32Z" />
          </>
        </svg>
      </a>
    ) : (
      <div />
    )
  }
</div>
